<!DOCTYPE html>											<!-- 文档HTML5格式的定义        -->
<html>
	<head>
		<meta charset="utf-8">							<!--  HTML5的页面字符设置       -->
		<title>HTML5+CSS3布局示例(博客首页)</title>
		<!--[if IE]> <script src="html5.js"></script> <![endif]-->		<!-- 让HTML5兼容IE早期版本      -->
 		<link rel="stylesheet" href="layout.css" type="text/css">
	</head>
  
	<body>
		<header id="page_header">						<!-- 使用header定义页面头部     -->
			 <h1>Header</h1>		
			 <nav>										<!-- 使用nav定义页面导航条      -->
				<ul>
					<li><a href="#">首页</a></li>
					<li><a href="#">日志</a></li>
					<li><a href="#">相册</a></li>
					<li><a href="#">收藏</a></li>
				</ul>
			</nav>
		</header>
		
		<section id="posts">							<!-- 使用section定义页面主体区  -->
			<h2>Section</h2>
			<article class="post">						<!-- 使用article定义文章区      -->
				<h2>文章标题</h2>
				
				<header>								<!-- 使用header定义文章头       -->
					<h3>文章 Header</h3>
				</header>
				
				<aside>									<!-- 使用aside定义文章侧边      -->
					<h3>文章 Aside</h3>
				</aside>
			
				<p>这里是文章的内容这里是文章的内容这里是文章的内容这里是文章的内容这里是文章的内容这里是文章的内容这里是文章的内容这里是文章的内容这里是文章的内容这里是文章的内容这里是文章的内容这里是文章的内容这里是文章的内容这里是文章的内容...</p>
				<p>这里是文章的内容...</p>
				
				<footer>								<!-- 使用footer定义文章底部信息 -->		
					<h3>文章 Footer</h3>
			 	</footer>
			</article>
			  
			<article class="post">						<!-- 使用article定义文章区     -->
				<h2>文章标题</h2>
				
				<header>								<!-- 使用header定义文章头      -->
					<h3>文章 Header</h3>
				</header>
				
				<aside>									<!-- 使用aside定义文章侧边     -->
					<h3>文章 Aside</h3>
				</aside>
			
				<p>这里是文章的内容...</p>
				<p>这里是文章的内容...</p>
				
				<footer>								<!-- 使用footer定义文章底部信息 -->		
					<h3>文章 Footer</h3>
			 	</footer>
			</article>
		</section>
	       
		<aside id="sidebar">							<!-- 使用aside定义页面的侧边栏 -->				
			<h2>Aside</h2>
			<header>									<!-- 使用header侧边列表头      -->	
				<h2>Sidebar Header</h2>
			</header>
			<nav>										<!-- 使用nav定义侧边导航       -->	
				<h3>栏目标题</h3>
				<ul>
					<li><a href="#">文章标题一...</a></li>
					<li><a href="#">文章标题二...</a></li>
					<li><a href="#">文章标题三...</a></li>
					<li><a href="#">文章标题四...</a></li>
					<li><a href="#">文章标题五...</a></li>
				</ul>
			</nav>
		</aside>
  
     	<footer id="page_footer">						<!-- 使用footer定义页面页脚   -->	
         	<h2>Footer</h2>
     	</footer>
 	</body>
</html>

